<template>
	<!-- 作品 极速联系 -->
	<view>
		<view class="actionBar">
			<view class="marginLeft-20" style="width:200rpx;">
				<view class="fs-28 bold" style="color:#000;">{{ SpeedContactInfo.price }} 金币</view>
				<view class="fs-20 marginTop-5" style="color:#999;">
					剩余：{{ SpeedContactInfo.RewardMoney? SpeedContactInfo.RewardMoney: 0 }}金币</view>
			</view>
			<view class="baomingBtn" @click="onSubmit">确定提交</view>
		</view>

		<uni-notice-bar showIcon
			:text="'花费' + SpeedContactInfo.price + '金币,可获得平台专人对接,尽快把您的信息送达给对方,100%获得答复,如果对方拒绝与您联系,将退还'+ SpeedContactInfo.price +'金币,请保持电话畅通~'"></uni-notice-bar>

		<view class="commCards row-between" style="height:70rpx;">
			<view class="">
				<head-wear :width="90" :height="90" border-width="4" :WxHeadPic="SpeedContactInfo.toUserinfo.WxHeadPic"
					:userInfo="SpeedContactInfo.toUserinfo" :UserLevelID="SpeedContactInfo.toUserinfo.UserLevelID"
					image-width="30" image-height="20" size="16" right="-7" bottom="0" oneRight="0"></head-wear>

				<view class="marginLeft-20" style="float:left;">
					<view class="fs-30 row-start" style="max-width: 450rpx;">
						<view class="one-ellipsis">{{ SpeedContactInfo.toUserinfo.NickName }}</view>
						<view class="" v-if="SpeedContactInfo.toUserinfo.UserSex">
							<image :src="baseUrl + 'icon/boy.png'" class="sex-image-size marginLeft-10"
								v-if="JSON.parse(SpeedContactInfo.toUserinfo.UserSex).value == 1"></image>
							<image :src="baseUrl + 'icon/girl.png'" class="sex-image-size marginLeft-10"
								v-if="JSON.parse(SpeedContactInfo.toUserinfo.UserSex).value == 0"></image>
						</view>
						<auth-label v-if="SpeedContactInfo.toUserinfo.isAuthOk == 2" :size="18"
							height="30"></auth-label>
						<personality-label v-if="SpeedContactInfo.toUserinfo.BeautifulWomen == 1" :size="18"
							height="30"></personality-label>
						<image :src="baseUrl + 'icon/enterprise.png'" class="company-image-size marginLeft-10"
							v-if="SpeedContactInfo.toUserinfo.isCompanyAuth && SpeedContactInfo.toUserinfo.isCompanyAuth == 1">
						</image>

					</view>
					<view class="fs-22 marginTop-8" style="color:#999;max-width: 450rpx;">
						<text v-for="(item,index) in SpeedContactInfo.UserRoles" :key="index">
							{{ item.LabelName }}
							<text v-if="index < SpeedContactInfo.UserRoles.length - 1">，</text>
						</text>
						<text v-if="SpeedContactInfo.toUserinfo.UserCity !== '请设置您所在的城市'">｜
							{{ SpeedContactInfo.toUserinfo.UserCity }}</text>
					</view>
				</view>
			</view>
			<view class="fs-20">
				<view class="flex-1 text-align-right" style="color:#2cff5d;"
					v-if="SpeedContactInfo.toUserinfo.isOnline == 1">在线</view>
				<view class="flex-1 text-align-right" style="color:#d6d6d6;" v-else>
					{{ $common.timeDiff(SpeedContactInfo.toUserinfo.onlineTime,new Date()) }}</view>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">联系需求</view>
			<view class="marginTop-20">
				<fui-textarea placeholder="请输入内容" size="24" backgroundColor="#f0f0f0" radius="20" height="100rpx"
					v-model="submitInfo"></fui-textarea>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">确认报名信息</view>
			<view class="borderR-10 padding-all-30 marginTop-20 row-between" style="background-color:#f0f0f0;"
				@click="navTo(`/notice/addInfo`)">
				<view class="row-start">
					<view>
						<view class="text-align-center">
							<fui-icon name="idcard-fill" size="64"></fui-icon>
						</view>
						<view>我的联系信息</view>
					</view>
					<view class="fs-24 marginLeft-20">
						<view>
							{{SpeedContactInfo.myUserinfo.ContactName? SpeedContactInfo.myUserinfo.ContactName : '未设置'}}
						</view>
						<view v-if="SpeedContactInfo.myUserinfo.isShowWeixin == 1">
							微信号：{{SpeedContactInfo.myUserinfo.WeixinCode? SpeedContactInfo.myUserinfo.WeixinCode: '未设置'}}
						</view>
						<view v-if="SpeedContactInfo.myUserinfo.isShowMobile == 1">
							手机号：{{SpeedContactInfo.myUserinfo.UserMobile? SpeedContactInfo.myUserinfo.UserMobile: '未设置'}}
						</view>
						<view v-if="SpeedContactInfo.myUserinfo.isShowQQ == 1">
							手机号：{{SpeedContactInfo.myUserinfo.QQCode? SpeedContactInfo.myUserinfo.QQCode: '未设置'}}</view>
					</view>
				</view>
				<view>
					<fui-icon name="arrowright" size="34"></fui-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AuthLabel from "@/components/authLabel.vue";
	import PersonalityLabel from "@/components/personalityLabel.vue";
	import HeadWear from "@/components/headwear.vue"
	export default {
		components: {
			AuthLabel,
			PersonalityLabel,
			HeadWear,
		},
		data() {
			return {
				UserID: 0,
				SpeedContactInfo: {},
				submitInfo: '',
				baseUrl: ''
			};
		},

		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			// 被联系的人的ID
			this.UserID = option.UserID;
		},
		onShow() {
			this.getSpeedContactInfo()
		},
		methods: {
			getSpeedContactInfo() {
				this.$httpost('/home/QuickContact', {
					UserID: this.UserID
				}).then(res => {
					// console.log(res)
					if (res.code == 200) this.SpeedContactInfo = res.data
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 提交按钮
			onSubmit() {
				let options = {
					TargetUserID: this.SpeedContactInfo.toUserinfo.UserID,
					ContactMemo: this.submitInfo,
					ContactName: this.SpeedContactInfo.myUserinfo.ContactName,
					UserMobile: this.SpeedContactInfo.myUserinfo.WeixinCode,
					WeixinCode: this.SpeedContactInfo.myUserinfo.UserMobile,
					QQCode: this.SpeedContactInfo.myUserinfo.QQCode,
				}
				if (!options.ContactMemo) {
					uni.showToast({
						title: '请输入联系内容！',
						icon: 'none'
					})
					return false;
				}

				if (!options.ContactName) {
					uni.showToast({
						title: '请填写联系人！',
						icon: 'none'
					})
					return false;
				}

				if (!options.UserMobile && !options.WeixinCode && !options.QQCode) {
					uni.showToast({
						title: '手机号、微信号、QQ号务必填写一项！',
						icon: 'none'
					})
					return false;
				}

				if (this.SpeedContactInfo.RewardMoney < this.SpeedContactInfo.price) {
					uni.showModal({
						title: '金币不足！',
						content: '请充值',
						confirmText: '去充值',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/myPages/pages/myWallet?UserID=${this.SpeedContactInfo.myUserinfo.UserID}`
								})
							}
						}
					})
					return false;
				}


				this.$httpost('/contact/contactSub', options).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: `消耗${this.SpeedContactInfo.price}金币,已提交等待联系！`,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.uni-noticebar__content-text {
		font-size: 24rpx !important;
	}

	.NoticeUserHeadPic {
		width: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;

	}

	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: space-start;
		align-items: flex-start;
	}

	.NoticeUserHeadPic image {
		width: 100%;
		height: 100%;
		border-radius: 60rpx;
	}

	.actionBar {
		padding: 20rpx;
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 190rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.popupButton::after {
		border: none;
	}

	.popupButton {
		width: 100%;
		background-color: #FFDD00;
		height: 80rpx;
		margin-top: 35rpx;
		font-size: 28rpx;
	}

	.uni-noticebar-icon {
		margin-right: 28rpx;
	}

	.uni-noticebar__content-text {
		font-size: 26rpx;
	}
</style>